<style lang="less">
    @import "../../../styles/table.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card title="学员考试记录">
                    <Row @keydown.enter.native="handleSearch">
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70">
                            <Form-item label="学员名称" prop="userName">
                                <Input type="text" v-model="searchForm.userName" placeholder="请输入学员名称" clearable style="width: 200px"/>
                            </Form-item>
                            <Form-item label="身份证号" prop="userName">
                                <Input type="text" v-model="searchForm.idCard" placeholder="请输入身份证号" clearable style="width: 200px"/>
                            </Form-item>
                            <Form-item label="考试状态" prop="examStatus">
                                <Select v-model="searchForm.examStatus" placeholder="请选择考试状态" clearable style="width: 200px">
                                    <Option value="1">已交费</Option>
                                    <Option value="2">已考试</Option>
                                </Select>
                            </Form-item>
                            <Form-item label="考试名称" prop="examName">
                                <Input type="text" v-model="searchForm.examName" placeholder="请输入考试名称" clearable style="width: 200px"/>
                            </Form-item>
                            <Form-item style="margin-left:-35px;" class="br">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <!--<Button @click="importFile" icon="md-add">导入考试学员</Button>
                        <Button @click="download" icon="md-arrow-round-down">下载模板</Button>-->
                        <Button @click="exportExam" icon="md-arrow-round-down">导出学员报告记录</Button>
                        <Button @click="importFileCJ" icon="md-add">导入成绩</Button>
                        <Button @click="downloadCJ" icon="md-arrow-round-down">下载成绩模板</Button>
                        <Button @click="importFileZS" icon="md-add">导入证书</Button>
                        <Button @click="downloadZS" icon="md-arrow-round-down">下载证书模板</Button>
                        <Button @click="downloadImg" icon="md-arrow-round-down">下载照片</Button>
                        <circleLoading v-if="operationLoading"/>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns"  size="small"  :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <!--<Upload action="/base/common/importExaminationExcel" :on-success="handleSuccess"  v-show="false">
            <Button icon="ios-cloud-upload-outline" ref="upload">Upload files</Button>
        </Upload>-->
        <Upload action="/base/common/importExaminationCJExcel" :on-success="handleSuccess"  v-show="false">
            <Button icon="ios-cloud-upload-outline" ref="upload">Upload files</Button>
        </Upload>
        <Upload action="/base/common/importCertificateExcel" :on-success="handleCertificateSuccess"  v-show="false">
            <Button icon="ios-cloud-upload-outline" ref="uploadZS">Upload files</Button>
        </Upload>
        <exaTimeManage ref="exaTimeManage"></exaTimeManage>
        <awardDrawer ref="awardDrawer"></awardDrawer>
        <!--<gkregister-drawer ref="gkregisterDrawer"></gkregister-drawer>-->
    </div>
</template>

<script>
    import circleLoading from "../../my-components/circle-loading.vue";
    import {userExaminationList, getOssSeting} from "@/api/bus";
    import gkregisterDrawer from "./examination-drawer";
    import exaTimeManage from "./exaTimeManage";
    import awardDrawer from "./award-drawer";
    import Util from '@/libs/util';

    export default {
        name: "gkregister-manage",
        components: {
            awardDrawer,
            gkregisterDrawer,
            circleLoading,
            exaTimeManage
        },
        data() {
            return {
                loading: false, // 表单加载状态
                operationLoading: false,
                drop: false,
                editTitle: "", // 编辑节点名称
                treeData: [],
                selectCount: 0, // 多选计数
                selectList: [], // 多选数据
                dropDownContent: "展开",
                dropDownIcon: "ios-arrow-down",
                searchForm: {
                    pageNumber: 1, // 当前页数
                    pageSize: 10, // 页面大小
                    sort: "u.createTime", // 默认排序字段
                    order: "desc", // 默认排序方式
                    userName: "",
                    idCard: "",
                    examStatus: 100,
                    examType: 1,
                    examName: '',//考试名称
                },
                selectDate: null, //选择日期绑定modal
                selectNode: {},
                industryModalVisible: false,
                industryModalTitle: '添加行业',
                submitLoading: false, // 添加或编辑提交状态
                form: {
                    id: '',
                    enumCode: '',
                    enumName: '',
                    sortOrder: '',
                    enumType: ''
                },
                formValidate: {
                    enumName: [{required: true, message: "行业名称不能为空", trigger: "blur"}],
                    sortOrder: [{required: true, message: "行业排序不能为空", trigger: "blur"}],
                    enumCode: [{required: true, message: "行业编码不能为空", trigger: "blur"}]
                },
                columns: [

                    {
                        type: "index",
                        width: 80,
                        fixed: "left",
                        align: "center"
                    },
                    {
                        title: "学员名称",
                        width: 130,
                        align: "center",
                        fixed: "left",
                        key: "userName"
                    },
                    {
                        title: "身份证号",
                        width: 180,
                        align: "center",
                        key: "idCard"
                    },
                    {
                        title: "考试名称",
                        width: 200,
                        align: "center",
                        key: "examName",
                        render: (h, params) => {
                            let re = "";
                            if (params.row.examName) {
                                re = params.row.examName;
                            } else {
                                re = "--";
                            }
                            return h("div", re);
                        }
                    },
                    {
                        title: "考试code",
                        width: 180,
                        align: "center",
                        key: "examinationCode"
                    },
                    {
                        title: "学员考试编号",
                        width: 180,
                        align: "center",
                        key: "examNum",
                        render: (h, params) => {
                            let re = "";
                            if (params.row.examNum) {
                                re = params.row.examNum;
                            } else {
                                re = "--";
                            }
                            return h("div", re);
                        }
                    },
                    {
                        title: "考试类型",
                        width: 150,
                        align: "center",
                        key: "examType2",
                        render: (h, params) => {
                            if (params.row.examType2 === 1) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "green"
                                            }
                                        },
                                        "证书认定"
                                    )
                                ]);
                            } else {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "blue"
                                            }
                                        },
                                        "证书报考"
                                    )
                                ]);
                            }
                        }
                    },
                    {
                        title: "考试状态",
                        align: "center",
                        width: 150,
                        key: "examStatus",
                        render: (h, params) => {
                            if (params.row.examStatus === 0) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "blue"
                                            }
                                        },
                                        "未交费"
                                    )
                                ]);
                            } else if (params.row.examStatus === 1) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "blue"
                                            }
                                        },
                                        "已缴费"
                                    )
                                ]);
                            } else if (params.row.examStatus === 2) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "green"
                                            }
                                        },
                                        "已考试"
                                    )
                                ]);
                            } else if (params.row.examStatus === 3) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "red"
                                            }
                                        },
                                        "已取消"
                                    )
                                ]);
                            }
                        }
                    },
                    {
                        title: "认定证书",
                        width: 180,
                        align: "center",
                        key: "userCertificateName",
                        render: (h, params) => {
                            if(params.row.examType2 != 1){
                                return h("div", "--");
                            }
                            let re = "";
                            if (params.row.userCertificateName) {
                                re = params.row.userCertificateName;
                            } else {
                                re = "--";
                            }
                            return h("div", re);
                        }
                    },
                    {
                        title: "考试成绩",
                        width: 150,
                        align: "center",
                        key: "qualified",
                        render: (h, params) => {
                            if (params.row.qualified === 1) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "green"
                                            }
                                        },
                                        "合格"
                                    )
                                ]);
                            } else if(params.row.qualified === 0){
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "red"
                                            }
                                        },
                                        "不合格"
                                    )
                                ]);
                            } else {
                                return h("div", "--");
                            }
                        }
                    },
                    {
                        title: "交费时间",
                        align: "center",
                        width: 180,
                        key: "payTime",
                        render: (h, params) => {
                            let re = "";
                            if (params.row.payTime) {
                                re = params.row.payTime;
                            } else {
                                re = "--";
                            }
                            return h("div", re);
                        }
                    },
                    /*{
                        title: "是否颁发证书",
                        align: "center",
                        width: 150,
                        key: "isAward",
                        render: (h, params) => {
                            let re = "--";
                            if(params.row.examType2 === 1){
                                return h("div", "--");
                            }
                            if (params.row.isAward === 0) {
                                re = [h(
                                            "Tag",
                                            {
                                                props: {
                                                    color: "red"
                                                }
                                            },
                                            "未颁发"
                                        )
                                    ];
                            } else if(params.row.isAward === 1){
                                re = [
                                        h(
                                            "Tag",
                                            {
                                                props: {
                                                    color: "green"
                                                }
                                            },
                                            "已颁发"
                                        )
                                    ];
                            }
                            return h("div", re);
                        }
                    },*/
                    {
                        title: "操作",
                        key: "action",
                        fixed: "right",
                        width: 180,
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.exaTime(params.row);
                                            }
                                        }
                                    },
                                    "考试场次"
                                ),
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "info",
                                            size: "small"
                                        },
                                        on: {
                                            click: () => {
                                                this.award(params.row);
                                            }
                                        }
                                    },
                                    "颁发证书"
                                )
                            ]);
                        }
                    }],
                data: [], // 表单数据
                total: 0, // 表单数据总数
            }
        },
        methods: {
            init() {
                this.getDataList();
            },
            getDataList() {
                this.loading = true;
                userExaminationList(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.data = res.data.rows;
                        this.total = res.data.total;
                    }
                });
            },
            award(v) {
                if(v.isAward === 0){
                    this.$refs.awardDrawer.showDrawer(v);
                }else if(v.isAward === 1){
                    this.$Message.warning("该学员已颁发证书");
                    return;
                }else{
                    this.$Message.warning("暂不支持颁发证书");
                    return;
                }
            },
            exaTime(v) {
                this.$refs.exaTimeManage.showDrawer(v);
            },
            edit(v) {
                this.$refs.gkregisterDrawer.showDrawer(v);
            },
            importFileZS() {
                this.$Modal.confirm({
                    title: "导入提示",
                    content: "若用户已存在导入的证书则导入失败",
                    onOk: () => {
                        this.$refs.uploadZS.$el.click()
                    }
                });
            },
            downloadZS() {
                location.href = "../证书模板.xlsx";
            },
            download() {
                location.href = "../考试记录模板.xlsx";
            },
            downloadCJ() {
                location.href = "../考试成绩模板.xlsx";
            },
            importFile() {
                this.$Modal.confirm({
                    title: "导入提示",
                    content: "若导入学员不存在则该条记录将导入失败！",
                    onOk: () => {
                        this.$refs.upload.$el.click()
                    }
                });

            },
            importFileCJ() {
                this.$Modal.confirm({
                    title: "导入提示",
                    content: "若导入学员不存在则该条记录将导入失败！",
                    onOk: () => {
                        this.$refs.upload.$el.click()
                    }
                });

            },
            //导出学员考试成绩
            exportExam() {
                window.location.href = Util.initUrl("/base/common/exportExamination", this.searchForm);
            },
            handleCertificateSuccess(response, file, fileList) {
                if(response.status){
                    this.$Message.success(response.info);
                    this.getDataList();
                }else{
                    this.$Message.error(response.info);
                }
            },
            handleSuccess(response, file, fileList) {
                if(response.status){
                    this.$Message.success(response.info);
                    this.getDataList();
                }else{
                    this.$Message.error(response.info);
                }
            },
            //设置课程推荐状态
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getDataList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.userName = "";
                this.searchForm.idCard = "";
                this.searchForm.examStatus = 100;
                this.searchForm.examType = 100
                // 重新加载数据
                this.getDataList();
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "展开";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getDataList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getDataList();
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getDataList();
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            loadJs (src) {
                return new Promise((resolve, reject) => {
                    const script = document.createElement('script')
                    script.type = 'text/javascript'
                    script.onload = () => {
                        resolve()
                    }
                    script.onerror = () => {
                        reject()
                    }
                    script.src = src
                    document.getElementsByTagName('body')[0].appendChild(script)
                })
            },
            downloadImg() {
                let flag = false
                getOssSeting().then(res => {
                    this.data.forEach(e => {
                        if(e.cardLiveImg){
                            flag = true
                            this.handlePreview(e.cardLiveImg, e.idCard + '.jpg', res.data)
                        }
                    })
                });
                if(!flag){
                    this.$Message.error('暂无可下载的照片');
                }
            },
            handlePreview(url, name, configData) {
                url = url.replace('http://cbstudy.oss-cn-shenzhen.aliyuncs.com', '')
                //const OSS = require('ali-oss')
                const client = new OSS.Wrapper({
                    region: 'oss-cn-shenzhen',
                    // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
                    accessKeyId: configData.AccessKeyId,
                    accessKeySecret: configData.AccessKeySecret,
                    stsToken: configData.SecurityToken,
                    bucket: 'cbstudy'
                })
                // object-key表示从OSS下载文件时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
                url = client.signatureUrl(url, { expires: 3600, response: { 'content-disposition':'attachment; filename="' + name + '"' } })
                const elemIF = document.createElement('iframe')
                elemIF.src = url
                elemIF.style.display = 'none'
                document.body.appendChild(elemIF)
                // window.open(url)
            }
        },
        created() {
            this.loadJs('http://gosspublic.alicdn.com/aliyun-oss-sdk-5.3.1.min.js')
        },
        mounted() {
            this.init();
        }
    }
</script>
